import classNames from 'classnames'
import Count from '../Count'
import { useState } from 'react'
// 导入useSelector获取store中的数据
import { useSelector } from 'react-redux'
// 导入useDispatch触发Action
import { useDispatch } from 'react-redux'
import { plusCartList, decrCartList, DelCartList } from '../../store/modules/takeaway'
import './index.scss'

const Cart = () => {
  // 触发Action函数
  const dispatch = useDispatch()

  // 获取store的购物车数据
  const { cartList } = useSelector(item => item.foods)

  // 做购物车数据的计算总价操作
  const cartPrice = cartList.reduce((a, c) => a + c.price * c.count, 0)

  // 控制购物车开启或关闭功能
  const [isVisiable, setIsVisiable] = useState(false)

  // 是否显示遮罩层
  const onShow = () => {
    if (cartList.length > 0) {
      setIsVisiable(true)
    }
  }
  // 清空购物车
  const ClearCartList = () => {
    setIsVisiable(false)
    dispatch(DelCartList())
  }
  // 减少购物车商品数量
  const DresCartList = (item) => {
    // 判断是否为数量和长度为最后一个，是则关闭遮罩层
    if (item.count === 1 && cartList.length === 1) {
      setIsVisiable(false)
    }
    dispatch(decrCartList(item))

  }
  return (
    <div className="cartContainer">
      {/* 遮罩层 添加visible类名可以显示出来 */}
      <div onClick={() => setIsVisiable(false)}
        className={classNames('cartOverlay', isVisiable && 'visible')}
      />
      <div className="cart">
        {/* fill 添加fill类名可以切换购物车状态*/}
        {/* 购物车数量 */}
        <div onClick={onShow} className={classNames('icon', cartList.length > 0 && 'fill')}>
          {cartList.length > 0 && <div className="cartCornerMark">{cartList.length}</div>}
        </div>
        {/* 购物车价格 */}
        <div className="main">
          <div className="price">
            <span className="payableAmount">
              <span className="payableAmountUnit">¥</span>
              {cartPrice.toFixed(2)}
            </span>
          </div>
          <span className="text">预估另需配送费 ¥5</span>
        </div>
        {/* 结算 or 起送 */}
        {cartList.length > 0 ? (
          <div className="goToPreview">去结算</div>
        ) : (
          <div className="minFee">¥20起送</div>
        )}
      </div>
      {/* 添加visible类名 div会显示出来 */}
      <div className={classNames('cartPanel', isVisiable & cartList.length > 0 && 'visible')}>
        <div className="header">
          <span className="text">购物车</span>
          {/* 清空购物车 */}
          <span className="clearCart" onClick={() => ClearCartList()}>
            清空购物车
          </span>
        </div>

        {/* 购物车列表 */}
        <div className="scrollArea" >
          {cartList.map(item => {
            return (
              <div className="cartItem" key={item.id}>
                <img className="shopPic" src={item.picture} alt="" />
                <div className="main">
                  <div className="skuInfo">
                    <div className="name">{item.name}</div>
                  </div>
                  <div className="payableAmount">
                    <span className="yuan">¥</span>
                    <span className="price">{item.price}</span>
                  </div>
                </div>
                <div className="skuBtnWrapper btnGroup">
                  {/* 子传父，子组件调用父组件方法 */}
                  <Count
                    count={item.count}
                    onPlus={() => dispatch(plusCartList(item))}
                    onMinus={() => DresCartList(item)}
                  />
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}

export default Cart
